<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h1>计算属性</h1>
    <p>
      依赖缓存：当源数据没有变化时，会将计算结果缓存起来，方便下次使用，避免重复计算。
    </p>
    <p v-for="item in res">
      <span>姓名：{{item.name}}</span>
      <span>成绩：{{item.point}}</span>
    </p>
    <!-- <p>平均成绩：{{avaPoint}}</p>
    <p>平均成绩：{{avaPoint}}</p>
    <p>平均成绩：{{avaPoint}}</p>
    <p>平均成绩：{{avaPoint1()}}</p>
    <p>平均成绩：{{avaPoint1()}}</p>
    <p>平均成绩：{{avaPoint1()}}</p> -->
    <hr>
    <input type="text" v-model="age">
    <p>你的年龄：{{age}}岁</p>
    <p>{{info}}</p>
    <hr>
    <input type="text" v-model="beauty">
    <p>{{msg}}</p>
    <p v-show="isBf">震惊！易烊千玺女友曝光，竟然是她...</p>
    <p v-show="isHot">爆！男人看了会沉默，女人看了会流泪</p>
    <p v-show="isDown">程序员开启996</p>
  </div>
  <script src="./vue.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        res: [
          {name: '张三',point: 99},
          {name: '李四',point: 100},
          {name: '王五',point: 85},
        ],
        age: 8,
        info: '',
        // 初识颜值
        beauty: 80,
        msg: '你好，打工人',
        // 易烊千玺是不是你男朋友
        isBf: false,
        // 上热搜
        isHot: false,
        // 微博服务器崩溃
        isDown: false
      },
      watch: {
        age: function (newValue, oldValue) {
          console.log(newValue, oldValue);
          if(newValue<18) {
            this.info = '未成年人禁止入内！'
          }else if(newValue == 18) {
            this.info = '你已经18岁了，可以做一些成年人做的事情了'
          }else {
            this.info = '你可以退休了'
          }
        },
        // 监听颜值的变化
        beauty: function(newValue, oldValue) {
          if(newValue<90 && newValue>=85) {
            this.msg = '你好，小姐姐'
          }else if(newValue>=90) {
            this.msg = '易烊千玺：送你一朵小红花';
            this.isBf = true;
            this.isHot = true;
            this.isDown = true;
          }
        }
      },
      // 计算属性
      computed: {
        avaPoint() {
          console.log('computed');
          let num = 0;
          this.res.forEach(item => {
            num += item.point
          });
          let len = this.res.length;
          let totalNum = num/len;
          return totalNum
        }
      },
      methods: {
        avaPoint1() {
          console.log('fn');
          let num = 0;
          this.res.forEach(item => {
            num += item.point
          });
          let len = this.res.length;
          let totalNum = num/len;
          return totalNum
        }
      },
    })
  </script>
</body>
</html>